<template>
  <view class="content">
    <TitlePage title="商铺" :isSearch="false"></TitlePage>
    <Scrollbox className="shop-box" @lowerFun="getList" :otherHeight="120" :status="loadingStatus">
      <template #contScrollBox>
        <view
          class="shop-item"
          v-for="item in list"
          :key="item.member_id"
          @click="goPage(item.member_id, item.vip_type)"
        >
          <view class="shop-img">
            <zero-lazy-load
              class="img-box"
              :image="item.member_head"
              loadingImg="https://images.tongzhuangkc.com/tz/default-shop.png"
              errorImg="https://images.tongzhuangkc.com/tz/default-shop.png"
              borderRadius="16"
            ></zero-lazy-load>
            <view class="img-icon" :class="item.vip_type === 1 ? 'vip' : item.vip_type === 2 ? 'active' : ''"></view>
          </view>
          <view class="shop-info">
            <view class="info-title">{{ item.member_name }}</view>
            <view class="info-tag">
              <text class="tag">已加入{{ item.shop_join_day }}天</text>
            </view>
            <view class="shop-des">{{ item.member_desc }}</view>
            <view class="shop-des info-des">
              <text>女装/服饰内衣</text>
              <view class="des-address"><icon class="icon"></icon>{{ item.city || '暂无' }}</view>
            </view>
          </view>
        </view>
      </template>
    </Scrollbox>
    <TabBar :currentPage="3"></TabBar>
  </view>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import TabBar from '@/components/tabbar/index'
import TitlePage from '@/components/title/index'
import Scrollbox from '@/components/scrollbox/index'
import { shopList } from '@/http/shop'
export default {
  components: {
    TabBar,
    TitlePage,
    Scrollbox,
  },
  setup() {
    const state = reactive({
      list: [],
      listQuery: {
        page: 1,
      },
      loadingStatus: 'loading',
      isEnd: false,
    })
    const getList = async () => {
      if (state.isEnd) return
      try {
        let data = await shopList(state.listQuery)
        const { list, total_page } = data.data
        state.list = state.listQuery.page === 1 ? list : state.list.concat(list)

        if (list.length === 0 || total_page === state.listQuery.page) {
          state.loadingStatus = 'loadmore'
          state.isEnd = true
        } else {
          state.loadingStatus = 'loading'
          state.listQuery.page++
        }
      } catch (e) {
        state.isRefresh = false
        state.loading = false
      }
    }
    const initLoading = () => {
      state.isEnd = false
      state.listQuery.page = 1
      state.list = []
      getList()
    }
    const goPage = (id, type) => {
      if (type === 2) {
        uni.navigateTo({
          url: `/subpackage-goods/shop/index?id=${id}`,
        })
      }
    }
    onMounted(() => {
      initLoading()
    })
    return {
      ...toRefs(state),
      goPage,
      getList,
      initLoading,
    }
  },
}
</script>

<style lang="scss">
.content {
  background: linear-gradient(180deg, #d0e8ff 0%, rgba(208, 232, 255, 0) 60%, rgb(255, 255, 255) 100%);
  height: 100vh;
}

.shop-box {
  .shop-item {
    display: flex;
    padding: 24rpx;
    border: 1rpx solid #e8e8e8;
    justify-content: space-between;
    .shop-img {
      position: relative;
      width: 144rpx;
      height: 144rpx;
      .img-icon {
        width: 40rpx;
        height: 40rpx;

        position: absolute;
        bottom: 0;
        right: 0;
        &.vip {
          background: url('https://images.tongzhuangkc.com/tz/vip.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active {
          background: url('https://images.tongzhuangkc.com/tz/vip2.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .img-box {
        width: 100%;
        height: 144rpx;
        border-radius: 50%;
        .zero-content,
        .zero-lazy-item {
          height: 144rpx !important;
        }
      }
    }
    .shop-info {
      width: calc(100% - 168rpx);
      .info-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2b303b;
        line-height: 40rpx;
        margin-bottom: 16rpx;
        @include text-ellipsis(1);
        text {
          border-radius: 6rpx;
          font-size: 24rpx;
          color: #ffffff;
          line-height: 32rpx;
          padding: 4rpx 8rpx;
          margin-right: 8rpx;
          background: #e94148;
        }
      }
      .info-tag {
        height: 32rpx;
        display: flex;
        margin-bottom: 16rpx;
        .tag {
          background: linear-gradient(90deg, #ffb46f 0%, #ffc93f 100%);
          border-radius: 28rpx;
          line-height: 32rpx;
          padding: 0 8rpx;
          font-size: 20rpx;
          color: #fff;
        }
      }
      .shop-des {
        font-size: 24rpx;
        color: #2b303b;
        line-height: 32rpx;
        margin-bottom: 16rpx;
        @include text-ellipsis(1);
      }
      .info-des {
        display: flex;
        justify-content: space-between;
        margin: 0;
        color: #7f8798;
        .des-address {
          display: flex;
          align-items: center;
        }
        .icon {
          width: 32rpx;
          height: 32rpx;
          background: url('https://images.tongzhuangkc.com/tz/icon-postion.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
